<template>
  <div class="main-content">
    <div class="filter-container">
      <el-input
        class="filter-item"
        v-model="getListData.search_way"
        placeholder="搜索方式"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <el-input
        class="filter-item"
        v-model="getListData.initiator"
        placeholder="搜索发起方"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <el-input
        class="filter-item"
        v-model="getListData.staff_name"
        placeholder="业务员查询"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <el-input
        class="filter-item"
        v-model="getListData.cust_code"
        placeholder="客户号查询"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <el-input
        class="filter-item"
        v-model="getListData.region"
        placeholder="区域查询"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <el-input
        class="filter-item"
        v-model="getListData.country"
        placeholder="国家查询"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <!-- <el-input
        class="filter-item"
        v-model="getListData.email"
        placeholder="终端销售区域查询"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input> -->
      <el-input
        class="filter-item"
        v-model="getListData.season"
        placeholder="开发季节查询"
        clearable
        style="width: 200px; margin-left: 50px"
      ></el-input>
      <el-date-picker
        class="filter-item"
        v-model="getListData.year"
        type="year"
        placeholder="年份查询"
        style="width: 200px; margin-left: 50px"
      >
      </el-date-picker>
      <el-button
        size="medium"
        class="filter-item"
        type="primary"
        @click="getList"
        >查询</el-button
      >
      <el-button size="medium" class="filter-item" @click="resetSearch"
        >重置</el-button
      >
      <el-button size="medium" class="filter-item" @click="exportBeh"
        >导出搜花行为分析</el-button
      >
    </div>

    <p>搜花行为分析列表</p>
    <el-table :data="tableData" border>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column type="index" label="ID" align="center">
      </el-table-column>
      <el-table-column
        prop="search_way"
        label="搜索方式"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="word_img"
        label="关键字搜索/图片"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="initiator"
        label="搜索发起放方"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="staff_name"
        label="业务员"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="cust_code"
        label="客户号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="cust_name"
        label="客户名称"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="region" label="区域" width="150" align="center">
      </el-table-column>
      <el-table-column prop="country" label="国家" width="150" align="center">
      </el-table-column>
      <el-table-column label="终端销售区域" width="150" align="center">
        <template slot-scope="{ row }">
          <el-cascader
            v-model="row.sales_area"
            :options="areas"
            :props="{ multiple: true, checkStrictly: true }"
            filterable
            disabled
          ></el-cascader>
        </template>
      </el-table-column>
      <el-table-column prop="season" label="开发季" width="150" align="center">
      </el-table-column>
      <el-table-column prop="year" label="年份" width="150" align="center">
      </el-table-column>
      <el-table-column prop="extra" label="花型内容" width="150" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="{ row }">
          <!-- <router-link :to="`flowerInfo/${row.pid}/0`">
            <span style="color: #66acf1">花型详情</span>
          </router-link> -->
          <el-button size="mini" type="text" @click="linkInfo(row)"
            >花型详情</el-button
          >
          <!-- <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确认删除当前组织？"
            @confirm="deleteRow(row.id)"
            style="margin-left: 10px"
          >
            <el-button size="mini" type="text" slot="reference">删除</el-button>
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="text-align: right"
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="getListData.pageNo"
      :limit.sync="getListData.pageSize"
      @pagination="getList"
    ></pagination>
  </div>
</template>

<script>
// import { Message } from "element-ui";
import data from "@/app/utils/areas.json";
import { behaviorList, behaviorExport } from "@/app/api/analysis";
import { mapState } from "vuex";
import Pagination from "@/app/components/Pagination";

export default {
  components: {
    Pagination,
  },
  name: "Behavior",
  data() {
    return {
      areas: [],
      importVisible: false,
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      form: {},
      // dialogStatus: "", //编辑或新增
      // textMap: {
      //   update: "编辑",
      //   create: "新增",
      // },
      baseurl: api_url,
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    this.areas = data;
    this.getList();
  },
  methods: {
    getList() {
      behaviorList(this.getListData)
        .then((res) => {
          this.tableData = res.data.ret;
          this.totalPage = res.data.count;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    resetSearch() {
      this.getListData.search_way = "";
      this.getListData.initiator = "";
      this.getListData.staff_name = "";
      this.getListData.cust_code = "";
      this.getListData.region = "";
      this.getListData.country = "";
      this.getListData.season = "";
      this.getListData.year = "";
      this.getList();
    },
    exportBeh() {
      this.downloadLoading = true;
      behaviorExport(this.getListData)
        .then((res) => {
          this.downloadLoading = false;
          window.location.href = this.baseurl + "/" + res.data.path;
        })
        .catch((err) => {
          this.downloadLoading = false;
        });
    },
    // deleteRow(oid) {
    //   organizeDelete({ oid })
    //     .then((res) => {
    //       if (res.code == "00000") {
    //         Message({
    //           message: "删除成功",
    //           type: "success",
    //           duration: 5 * 1000,
    //         });
    //         this.getList();
    //       }
    //     })
    //     .catch((error) => {
    //       console.log("save error", error);
    //     });
    // },
    // handleCreate() {
    //   this.form = {
    //     usercode: "",
    //     username: "",
    //     email: "",
    //     mobile: "",
    //     department: "",
    //     organization: "",
    //     position: "",
    //     valid: "",
    //     role_id: "",
    //     ascription: "",
    //   };
    //   this.dialogStatus = "create";
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["acForm"].clearValidate();
    //   });
    // },
    // updateData(id) {
    //   this.$refs["acForm"].validate((valid) => {
    //     if (valid) {
    //       if (id) {
    //         this.form.id = id;
    //       }
    //       staffEdit(this.form)
    //         .then((res) => {
    //           if (res.code == "00000") {
    //             Message({
    //               message: "操作成功",
    //               type: "success",
    //               duration: 2 * 1000,
    //             });
    //             this.getList();
    //             this.dialogVisible = false;
    //           }
    //         })
    //         .catch((error) => {
    //           console.log("editOrder error", error);
    //         });
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    // handleEdit(row) {
    //   this.form = Object.assign({}, this.form, row);
    //   console.log(this.form);
    //   this.dialogStatus = "update";
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["acForm"].clearValidate();
    //   });
    // },
    linkInfo(row) {

      if(row.pids == ""){
        row.pids = 0
      }
       this.$router.push(`/analysis/Outcome/${row.pids}`);
      // this.$router.push({
      //   name: "Outcome",
      //   params: { pids: row.pids.split(",") },
      //   // params: { pids: [1,2,3] },
      // });
    },
  },
};
</script>

<style>
</style>
